<template>
  <div>
    <SkusTable
      showSelectCol
      :dataSource="TableInfo.list"
      :columns="TableInfo.columns"
      :loading="TableInfo.loading"
      :selectionChange="TableInfo.setSelection"
      :checkSelectable="checkSelectable"
    />
  </div>
</template>
<script>
import { mapState, mapGetters } from 'vuex';
import SkusTable from '@/components/skusTable';
import InputNumber from '@/components/inputNumber/inputNumber';
import ReferCitySelect from './ReferCitySelect';
import { TableInfo } from '@/utils/getUtils';
import { isSelfReferenced } from './utils';
import {
  getPriceRatioByAreaCodeService
} from '@/api/commodity/common';
export default {
  components: {
    SkusTable,
    InputNumber,
    ReferCitySelect
  },
  props: {
    dataSource: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      TableInfo: new TableInfo(),
    }
  },
  computed: {
    ...mapState('commonComps/referCitiesUpdate', [
      'batchSetDataVo', // 批量设置数据实例对象
      'checkedSupplyCityCodes', // 选中的供货城市code集合
      'referCitiesOptions', // 参照城市下拉列表
    ]),
    ...mapGetters('commonComps/referCitiesUpdate', [
      'isSupply', // 是否供货
      'isUnify', // 是否统一进价
    ]),
  },
  created () {
    this.updateColumnsByArea()
  },
  watch: {
    dataSource: {
      handler (newVal, oldValue) {
        this.isUnify() ? this.updateColumnsByUnify() : this.updateColumnsByArea()
        if (_.isEqual(newVal, oldValue)) return
        this.TableInfo.setList(newVal)
      },
      immediate: true,
      deep: true
    },
    TableInfo: {
      handler (newVal) {
        this.$emit('update:dataSource', this.TableInfo.list)
        this.$emit('update-info', newVal)
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    // 渲染参照城市表列
    renderReferCityCol (h, row) {
      const updateRow = async cityInfo => {
        row.templateCityUuid = cityInfo?.templateCityUuid
        row.templateCityName = cityInfo?.templateCityName
        if (!this.isSupply(row)) {
          const data = [{ saleCityUuid: row.saleCityUuid, templateCityUuid: row.templateCityUuid }]
          const res = await getPriceRatioByAreaCodeService(data, this.TableInfo.setLoading)
          row.costPriceRatio = res?.retData[0]?.costPriceRatio
          row.buyPriceRatio = res?.retData[0]?.buyPriceRatio ?? 1 // 进价比例默认为1
        }
      }
      const listeners = { 'getCityInfo': cityInfo => { updateRow(cityInfo) } }
      return <ReferCitySelect
        value={row.templateCityUuid}
        city-options={this.referCitiesOptions}
        supply-city-codes={this.checkedSupplyCityCodes}
        on={listeners}
      />
    },
    // 渲染比例表列
    renderRatioCol (h, row, key) {
      // 本销售城市编码等于本参照城市编码，即参照自己
      if (isSelfReferenced(row)) {
        row[key] = 1
        return <span>无需维护</span>
      }
      return <InputNumber value={ row[key] } size="mini" controls={false} onChange={val => { row[key] = val } } />
    },
    // 获取默认表列
    getDefaultColumns () {
      const columns = [
        { title: '销售城市', key: 'saleCityName' },
        { title: '销售省', key: 'saleProvinceName' },
        {
          title: '是否供货',
          render: (h, { row }) => {
            row.isSupply = this.isSupply(row) ? '1' : '2'
            if (row.isSupply == '1') return <span>是</span>
            if (row.isSupply == '2') return <span>否</span>
            return <span></span>
          }
        },
        { title: '业务区域', key: 'saleAreaName' },
      ]
      return columns
    },
    // 设置统一进价销售城市表列
    updateColumnsByUnify () {
      const columns = [
        ...this.getDefaultColumns(),
        {
          title: '参照城市',
          key: 'templateCityName',
        },
        {
          title: '进价比例',
          width: 100,
          render: (h, { row }) => <span>无需维护</span>
        },
        {
          title: '成本价比例',
          width: 160,
          render: (h, { row }) => this.renderRatioCol(h, row, 'costPriceRatio')
        }
      ]
      this.TableInfo.setColumns(columns)
    },
    // 设置区域进价销售城市表列
    updateColumnsByArea () {
      const columns = [
        ...this.getDefaultColumns(),
        {
          title: '参照城市',
          width: 130,
          render: (h, { row }) => this.renderReferCityCol(h, row)
        },
        {
          title: '进价比例',
          width: 160,
          render: (h, { row }) => this.renderRatioCol(h, row, 'buyPriceRatio')
        },
        {
          title: '成本价比例',
          width: 160,
          render: (h, { row }) => this.renderRatioCol(h, row, 'costPriceRatio')
        }
      ]
      this.TableInfo.setColumns(columns)
    },
    checkSelectable ({ row }) {
      if (this.isUnify() && isSelfReferenced(row)) return false
      return true
    },
  }
}
</script>
